<ion-header class="ion-no-border ion-no-shadow">
	<ion-toolbar>
		<ion-buttons slot="start">
			<ion-back-button></ion-back-button>
		</ion-buttons>
		<ion-title>{{ 'SETTINGS_PAGE.SETTINGS' | translate }}</ion-title>
	</ion-toolbar>
</ion-header>

<ion-content *ngIf="availableOptions && currentSettings">
	<ion-list>
		<ion-item-group>
			<ion-item>
				<ion-icon color="primary" name="globe" slot="start"></ion-icon>
				<ion-label
					>{{ 'SETTINGS_PAGE.LANGUAGE' | translate }}</ion-label
				>
				<ion-select
					[(ngModel)]="currentSettings.language"
					(ngModelChange)="onUpdate()"
					cancelText="{{ 'CANCEL' | translate }}"
				>
					<ion-select-option
						*ngFor="let item of objectKeys(availableOptions?.languages)"
						[value]="item"
					>
						{{ availableOptions?.languages[item] }}
					</ion-select-option>
				</ion-select>
			</ion-item>

			<ion-item>
				<ion-icon color="primary" name="cash" slot="start"></ion-icon>
				<ion-label
					>{{ 'SETTINGS_PAGE.CURRENCY' | translate }}</ion-label
				>
				<ion-select
					[(ngModel)]="currentSettings.currency"
					(ngModelChange)="onUpdate()"
					cancelText="{{ 'CANCEL' | translate }}"
				>
					<ion-select-option
						*ngFor="let item of objectKeys(availableOptions?.currencies)"
						[value]="item"
					>
						{{ item | uppercase }}
					</ion-select-option>
				</ion-select>
			</ion-item>
			<ion-item>
				<ion-icon color="primary" name="book" slot="start"></ion-icon>
				<ion-label
					>{{ 'SETTINGS_PAGE.WORDLIST_LANGUAGE' | translate
					}}</ion-label
				>
				<ion-select
					[(ngModel)]="currentSettings.wordlistLanguage"
					(ngModelChange)="onUpdate()"
					cancelText="{{ 'CANCEL' | translate }}"
				>
					<ion-select-option
						*ngFor="let item of objectKeys(availableOptions?.wordlistLanguages)"
						[value]="item"
					>
						{{ availableOptions?.wordlistLanguages[item] }}
					</ion-select-option>
				</ion-select>
			</ion-item>
		</ion-item-group>

		<ion-item-group>
			<ion-item-divider color="primary-background"></ion-item-divider>
			<ion-item detail (click)="openChangePinPage()" class="custom-arrow">
				<ion-icon
					color="primary"
					name="lock-closed"
					slot="start"
				></ion-icon>
				{{ 'SETTINGS_PAGE.CHANGE_PIN' | translate }}
			</ion-item>
			<!-- NOTE: Deprecate notifications -->
			<!-- <ion-item ion-item>
        <ion-icon color="primary" [name]="platform.is('ios') ? 'ios-notifications-outline' : 'md-notifications-outline'" slot="start"></ion-icon>
        <ion-label>{{ 'SETTINGS_PAGE.NOTIFICATIONS' | translate }}</ion-label>
        <ion-toggle [(ngModel)]="currentSettings.notification" (ngModelChange)="onUpdate()"></ion-toggle>
      </ion-item> -->
			<ion-item
				detail
				(click)="openManageNetworksPage()"
				class="custom-arrow"
			>
				<ion-icon color="primary" name="wifi" slot="start"></ion-icon>
				{{ 'CUSTOM_NETWORK.MANAGE_NETWORKS' | translate }}
			</ion-item>
		</ion-item-group>

		<ion-item-group>
			<ion-item-divider color="primary-background"></ion-item-divider>
			<ion-item>
				<ion-icon color="primary" name="moon" slot="start"></ion-icon>
				<ion-label
					>{{ 'SETTINGS_PAGE.DARK_MODE' | translate }}</ion-label
				>
				<ion-toggle
					[(ngModel)]="currentSettings.darkMode"
					(ngModelChange)="onUpdate()"
				></ion-toggle>
			</ion-item>
		</ion-item-group>

		<ion-item-group *ngIf="currentSettings.devMode">
			<ion-item-divider color="primary-background"></ion-item-divider>
			<ion-item detail (click)="presentLogReport()">
				<ion-icon color="primary" name="bug" slot="start"></ion-icon>
				<ion-label
					>{{ 'SETTINGS_PAGE.VIEW_LOG_REPORT' | translate
					}}</ion-label
				>
			</ion-item>
		</ion-item-group>

		<ion-item-group>
			<ion-item-divider color="primary-background"></ion-item-divider>
			<ion-item detail (click)="confirmClearData()" class="custom-arrow">
				<ion-icon color="primary" name="trash" slot="start"></ion-icon>
				{{ 'SETTINGS_PAGE.CLEAR_DATA' | translate }}
			</ion-item>
			<ion-item detail (click)="openPrivacyPolicy()" class="custom-arrow">
				<ion-icon
					color="primary"
					name="document"
					slot="start"
				></ion-icon>
				{{ 'SETTINGS_PAGE.PRIVACY_POLICY' | translate }}
			</ion-item>
			<ion-item
				detail="false"
				(click)="handleVersionClicks()"
				[button]="!currentSettings.devMode"
			>
				<ion-icon
					color="primary"
					name="information-circle-outline"
					slot="start"
				></ion-icon>
				{{ 'SETTINGS_PAGE.VERSION' | translate }}
				<div slot="end"><p>{{ appVersion }}</p></div>
			</ion-item>
		</ion-item-group>
	</ion-list>
</ion-content>

<pin-code
	[wallet]="currentWallet"
	(success)="onEnterPinCode()"
	#pinCode
></pin-code>
